<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      background-color: aliceblue;
    }
    .div{
      width: 450px;
      height: 800px;
      background-color: aliceblue;
      padding-top: 25px;
      margin: 0 auto;
    }
    .div1{
      width: 400px;
      height: 220px;
      background-color: white;
      margin-left: 25px;
      border: none;
      border-radius: 10px;
      box-shadow: 2px -1px 10px grey;
      position: absolute;
    }
    .div1_1{
      width: 110px;
      height: 25px;
      background-color: wheat;
      border: none;
      border-radius: 10px 0px 10px 0px;
      padding-left: 20px;
      font-size: 15px;
      position: absolute;
    }
    .p1{
      margin-top: 2px;
    }
    .p2{
      padding-left: 350px;
      margin-top: -20px;
    }
    .img1{
      width: 15px;
      height: 15px;
      padding-top: 22px;
    }
    .div1_3{
      margin-top: 35px;
      margin-left: 30px;
      position: absolute;
    }
    .p3{
      margin-left: 10px;
      color: darkgray;
      font-size: 12px;
    }
    .p4{
      font-size: 25px;
      font-weight:bold;
      margin-top: -10px;
    }
    .div1_4{
      text-align: center;
      margin-top: -60px;
      position: relative;
      margin-top: 50px;
    }
    .sp1{
      font-size: 25px;
      font-weight: bold;
    }
    .div1_4 p{
      font-size: 14px;
      color: darkgray;

    }
    .yuan{
      width: 150px;
      height: 150px;
      position: absolute;
      margin-left: 120px;
      border-radius: 50%;
      margin-top: -30px;
      border: 7px solid lightgrey;

    }
    .div1_5{
      margin-left: 340px;
      margin-top: -90px;
    }
    .p5{
      color: darkgray;
      font-size: 12px;
    }
    .p6{
      font-size: 25px;
      font-weight:bold;
      margin-top: -10px;
    }
    .div2{
      width: 400px;
      height: 450px;
      margin-top: 230px;
      margin-left: 25px;
    }
    .div2_1{
      display: flex;
      justify-content: space-between;
      position: relative;
    }
    .sp2{
      font-size: 10px;
      font-weight: normal;
    }
    .img3{
      width: 40px;height: 40px;
      margin-left: -2px;
    }
    .div2_2{
      text-align:center;
      padding: 10px;
      display: flex;
      justify-content: space-between;
    }
    .div2_2 div{
      display: flex;
      align-content: flex-start;
    }
    .div2_2 h4{
      margin-top: 4px;
      margin-left: 7px;
    }
    .div2_2 p{
      font-size: 12px;
      color: rgb(128, 128, 128);
      margin-top: 25px;
      margin-left: -66px;
    }
    .div2_3{
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
      float: bottom;
      position: relative;
    }
    .div3_1{
      width: 130px;
      height: 50px;
      background-color:  #00cba1;
      border: none;
      border-radius: 20px;
    }
    .div3_1 p{
      color: white;
      font-size: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 7px;
    }
    .div3_2{
      width: 130px;
      height: 50px;
      background-color: #ffecbc;
      border: none;
      border-radius: 20px;
    }
    .div3_2 p{
      color: yellowgreen;
      font-size: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 7px;
    }
    .div3{
      width: 100px;
      height: 30px;
      background-color:#de9b0b;
      border-radius: 18px 0 15px 0;
      margin-left: 320px;
      margin-top: -70px;
      position: absolute;
    }
    .div3 p{
      padding-left: 20px;
      margin-top: 3px;
      color: white;
    }
    .div4{
      color: lightgray;
      margin-left: 70px;
    }
  </style>
</head>
<body>
<div class="div">

  <div class="div1">
    <div class="div1_1">
      <p class="p1">经典均衡饮食</p>
    </div>
    <div class="div1_2">
      <p class="p2"><img src="25J888piCDIr.jpg" class="img1">2天</p>
    </div>
    <div class="div1_3">
      <p class="p3">摄入</p>
      <p class="p4">513</p>
    </div>
    <div class="div1_4">
      <div class="yuan"></div>
      <p>还可以吃</p><span class="sp1">1218</span>
      <p>推荐预算<span>1713</span></p>
    </div>
    <div class="div1_5">
      <p class="p5">运动</p>
      <p class="p6">0</p>
    </div>
  </div>

  <div class="div2">
    <div class="div2_1">
      <p style="font-size: 20px;font-weight: bold">午餐 <span class="sp2">建议623-761千卡</span></p>
      <p><span style="color: aqua">513 &nbsp&nbsp</span>千卡&nbsp&nbsp&nbsp
        <img src="无标题.jpg" style="width: 15px;height: 15px"></p>
    </div>
    <div class="div2_2">
      <div >
        <img src="tp1.jpg" class="img3" title="玉米">
        <h4>玉米(鲜)</h4>
        <p><span></span>1.0根(中)</p>
      </div>
      <p>148千卡 > </p>
    </div>
    <div class="div2_2">
      <div >
        <img src="tp2.jpg" class="img3" title="玉米">
        <h4>荷包蛋(油煎)</h4>
        <p>1.0个</p>
      </div>
      <p>117千卡 > </p>
    </div>
    <div class="div2_2">
      <div >
        <img src="tp3.jpg" class="img3" title="玉米">
        <h4>耗油炒生菜</h4>
        <p>1.0份</p>
      </div>
      <p>51千卡 > </p>
    </div>
    <div class="div2_2">
      <div >
        <img src="R-C.jfif" class="img3" title="玉米">
        <h4>香煎鸡胸肉</h4>
        <p>1.0份</p>
      </div>
      <p>197千卡 > </p>
    </div>
    <hr>
    <div class="div2_3">
      <div class="div3_1">
        <p>营养成分</p>
      </div>
      <div class="div3_2">
        <p>饮食建议</p>
      </div>
    </div>
    <div class="div3">
      <p>会员专享</p>
    </div>
    <div class="div4">
      <h2>完整记录三餐分析才准确</h2>
    </div>
  </div>

</div>
</body>
</html>